<template>
  <view class="content">
    <view class="search-box flex">
      <view class="search-input" @click="jump('/pages/search/index')">
        <icon type="search" class="icon" size="26" />
        搜索
      </view>
      <view
        @click="twoCode"
        class="flex flex-direction align-center justify-center scanCode"
      >
        <u-icon name="scan" size="26"></u-icon>
        <view class="font-12 align-center">扫一扫</view>
      </view>
    </view>
    <view class="text-xxl welcome">欢迎使用</view>
    <view class="flex flex-wrap">
      <view
        v-for="(item, index) in arr"
        :key="index"
        @click="
          jump(`/pages/operation/index?title=${item.title}&type=${item.value}`)
        "
        class="home_item_box text-xl"
      >
        <view class="title">{{ item.title }}</view>
        <view class="flex home_item_val justify-between align-center">
          <text>{{ item.count }}</text>
          <u-icon size="30" name="/static/images/icon/enter.png"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions } from "vuex";
import { getHomeList } from "@/api/system/home.js";
export default {
  data() {
    return {
      arr: [],
    };
  },
  onLoad: function () {},
  onShow() {
    this.getData();
    this.setSearchData();
  },
  methods: {
    ...mapActions("search", [
      "getWarehouseAction",
      "getBrandAction",
      "getModelNumberAction",
    ]),
    setSearchData() {
      this.getWarehouseAction();
      this.getBrandAction();
      this.getModelNumberAction("device_model");
    },
    jump(url) {
      this.$tab.navigateTo(url);
    },
    getData() {
      getHomeList().then((res) => {
        this.arr = res.result || [];
      });
    },
    twoCode() {
      let that = this;
      uni.scanCode({
        // scanType: ['qrCode'],   扫描的类型
        success(res) {
          //这里即拿到了扫描出的数据
          let result = JSON.parse(res.result)
          if (result.device) {
            that.jump(`/pages/equipmentDetail/index?id=${result.device}`);
          } else {
            this.$modal.msgError("非本系统二维码");
          }
        },
        fail(err) {
          console.log("扫码失败", err);
        },
        complete(end) {
          console.log("扫码结束", end);
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fff;
}
.search-box {
  padding: 60upx 20upx 0;
  color: #999;
  position: relative;
  font-size: 32upx;
  align-items: center;
  .search-input {
    background: #eee;
    border-radius: 15upx;
    padding: 20upx;
    flex: 1;
  }
  .icon {
    font-size: 38upx;
    margin-right: 15upx;
  }
  .scanCode {
    margin-left: 10upx;
  }
}
.welcome {
  padding: 50upx;
  font-weight: 700;
}
.home_item_box {
  padding: 30upx;
  width: 43%;
  border: 1px solid #4896f8;
  border-radius: 20upx;
  margin: 5% 0 0 5%;
  .title {
    font-weight: 700;
    font-size: 40upx;
    color: #4896f8;
  }
  .home_item_val {
    margin: 20upx 0;
  }
}
</style>
